import React, { Component } from 'react'
import { NavBar } from 'antd-mobile'
import "./Home.less"
import Banner from './component/Banner/Banner';
import Groupon from "./component/Groupon/Groupon"
import Seckill from "./component/Seckill/Seckill"
import Cate from "./component/Cate/Cate"
import Goods from "./component/Goods/Goods"
import { SearchList } from "../../components/SearchList"
import { SearchBar } from 'antd-mobile';
import { reqGetgroupon, reqGetnew } from "../../http/api"
import a from "../../assets/img/1.png"
import b from "../../assets/img/2.png"
import c from "../../assets/img/3.png"
import d from "../../assets/img/4.png"
import e from "../../assets/img/5.png"
import { connect } from "react-redux"
import { actions, getgetnewList,getgetGroupon,getgetseckill ,getcate,getN,getShowgoods} from "../../store/modules/home"
import { bindActionCreators } from 'redux';
class Home extends Component {
    componentDidMount() {
        //   1.9 触发redux中的请求
        let { home: { reqGetnewListAction } } = this.props
        reqGetnewListAction()
        // 2.9
        let {home:{reqGetGrouponAction}}=this.props
        reqGetGrouponAction()
        // 3.9触发redux中的请求  4.9
        let {home:{reqGetseckillAction,reqCateAction,reqGoodsAction}}=this.props
        reqGetseckillAction()
        reqCateAction()
        reqGoodsAction()


    }
    render() {
        // 1.10 3.10
        let { getnewList,getGroupon,getseckill,cate ,n,home:{changeN},showgoods} = this.props
        console.log(cate);
        return (
            <div className="home">
                <NavBar>首页</NavBar>
                <SearchBar placeholder="Search" maxLength={8} onSubmit={() => this.props.history.push("/search")} />

                {/* <SearchList></SearchList> */}

                <div className="new">
                    新人专享
                </div>
                {/* 新人专享 */}
                {getnewList.length > 0 ? <Banner getnewList={getnewList}></Banner> : null}

                <div className="lie">
                    <div className="nav">
                        <img src={a} alt="" />
                        <span>限时秒杀</span>
                    </div>
                    <div className="nav">
                        <img src={b} alt="" />
                        <span>限时秒杀</span>
                    </div>
                    <div className="nav">
                        <img src={c} alt="" />
                        <span>限时秒杀</span>
                    </div>
                    <div className="nav">
                        <img src={d} alt="" />
                        <span>限时秒杀</span>
                    </div>
                    <div className="nav">
                        <img src={e} alt="" />
                        <span>限时秒杀</span>
                    </div>

                </div>

                <div className="new">
                    万人团
                </div>
                {/* 万人团 */}
                {getGroupon.length > 0 ? <Groupon getGroupon={getGroupon}></Groupon> : null}

                <div className="new">
                    秒杀
                </div>
                {/* 秒杀专享 */}
                {getseckill.length > 0 ? <Seckill getseckill={getseckill}></Seckill> : null}


                {/* 分类 */}
                {/* {cate.length>0?<Cate cateList={cate}></Cate>:null} */}

                {/* 商品列表组件 */}
                <Goods n={n} changeN={(index)=>changeN(index)} showgoods={showgoods}></Goods>
            </div>
        )
    }
}
// 取数据
const mapStateToProps = (state) => {
    return {
        //1.7 取数据
        getnewList: getgetnewList(state),
        // 2.7取数据
        getGroupon: getgetGroupon(state),
        // 3.7取数据
        getseckill:getgetseckill(state),
        // 4.7取数据
        cate:getcate(state),
        // 5.1.6
        n:getN(state),
        // 5.1.8
        showgoods:getShowgoods(state)

    }
}
// 取方法的
const mapDispatchToProps = (dispatch) => {
    return {
        //1.8 将方法取回来
        home: bindActionCreators(actions, dispatch),
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);